<template>
	<view>
		<form class="form-container" @submit="onSubmit">
		      <!-- 基础信息 -->
		      <view class="form-group">
		        <view class="form-item">
		          <view class="label">检查部门</view>
		          <view class="input-wrapper">
		            <input 
		              mode="selector" 
		              :range="departmentList" 
		              
		              @change="onDepartmentChange"
		            />
		              
		           
		          </view>
		        </view>
		
		        <view class="form-item">
		          <view class="label">检查时间</view>
		          <view class="input-wrapper">
		            <input 
		              mode="date" 
		              start="2020-01-01" 
		              end="2099-12-31"
		             
		            />
		              
		            
		          </view>
		        </view>
		
		        <view class="form-item">
		          <view class="label">检查地点</view>
		          <view class="input-wrapper">
		            <input 
		              type="text" 
		              
		              placeholder="请输入检查地点"
		              class="input"
		            />
		          </view>
		        </view>
		      </view>
		
		      <!-- 主体基本信息区域 -->
		      <view class="section-title">主体基本信息</view>
		      <view class="form-group">
		        <view class="form-item">
		          <view class="label">主体名称</view>
		          <view class="input-wrapper">
		            <input 
		              type="text" 
		              
		              placeholder="请输入主体名称"
		              class="input"
		            />
		          </view>
		        </view>
		
		        <view class="form-item">
		          <view class="label">法人</view>
		          <view class="input-wrapper">
		            <input 
		              type="text" 
		             
		              placeholder="请输入法人姓名"
		              class="input"
		            />
		          </view>
		        </view>
		
		        <view class="form-item">
		          <view class="label">联系方式</view>
		          <view class="input-wrapper">
		            <input 
		              type="number" 
		               
		              placeholder="请输入联系电话"
		              class="input"
		            />
		          </view>
		        </view>
		
		        <view class="form-item">
		          <view class="label">主体地址</view>
		          <view class="input-wrapper">
		            <input 
		              type="text" 
		              
		              placeholder="请输入主体地址"
		              class="input"
		            />
		          </view>
		        </view>
		
		        <view class="form-item">
		          <view class="label">检查产品</view>
		          <view class="input-wrapper">
		            <input 
		              mode="selector" 
		              :range="productList" 
		             
		              @change="onProductChange"
		           />
		              
		            
		          </view>
		        </view>
		      </view>
		
		      <!-- 检查结果 -->
		      <view class="section-title">检查结果</view>
		      <view class="form-group">
		        <view class="form-item">
		          <view class="label">检查情况</view>
		          <view class="input-wrapper">
		            <textarea 
		             
		              placeholder="请输入检查情况"
		              class="textarea"
		              auto-height
		            ></textarea>
		          </view>
		        </view>
		      </view>
		
		      <!-- 提交按钮 -->
		      <view class="submit-btn-container">
		        <button 
		          form-type="submit" 
		          class="submit-btn"
		        >
		          保存记录
		        </button>
		      </view>
		    </form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.form-container {
  padding: 20rpx 30rpx 120rpx;
}

.section-title {
  background-color: #e5e5e5;
  color: #333;
  padding: 15rpx 20rpx;
  font-size: 28rpx;
  margin: 20rpx 0;
  border-radius: 8rpx;
}

.form-group {
  background-color: #fff;
  border-radius: 10rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 25rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.form-item:last-child {
  border-bottom: none;
}

.label {
  width: 200rpx;
  color: #666;
  font-size: 30rpx;
  line-height: 1.5;
}

.input-wrapper {
  flex: 1;
  position: relative;
}

.input {
  width: 100%;
  font-size: 30rpx;
  padding: 10rpx 0;
  color: #333;
  background-color: transparent;
}

.picker-view {
  width: 100%;
  font-size: 30rpx;
  padding: 10rpx 0;
  color: #333;
  display: flex;
  align-items: center;
  min-height: 60rpx;
}

.textarea {
  width: 100%;
  font-size: 30rpx;
  color: #333;
  min-height: 120rpx;
  line-height: 1.6;
}

/* 提交按钮 */
.submit-btn-container {
  padding: 40rpx 30rpx 20rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #00b341;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
}

/* 占位符样式 */
::placeholder {
  color: #ccc;
  font-size: 30rpx;
}
</style>
